
//全局设置axios请求拦截器
axios.interceptors.request.use(
    (config) => {//每次发请求之前都会调用
        //设置请求头
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
        return config;
    }, (error) => {
        return Promise.reject(error)
    }
)
//全局设置axios响应拦截器
axios.interceptors.response.use(
    (res) => {//每次返回到浏览器之前都会调用
       return res
    }, (error) => {//每次请求发生错误调用
        if(error.response.status==401){
            alert('登录已过期，请重新登录')
            location.href='./login.html'
            //过期时间到，清除token
            localStorage.removeItem('token')
        }else if(error.response.status==404){
            alert('访问路径有误')
        }else if(error.response.status=500){
            alert('服务器内部错误')
        
    }
    return Promise.reject(error)
    })

//获取搜索按钮
var searchBtn = document.querySelector('.right>.button');
//获取输入框
var inputEle = document.querySelector('.right>.text');
//获取localStorage中存储的数据
var userinfo = JSON.parse(localStorage.getItem('userinfo'))

//获取到登录用户的标签
document.querySelector('.username').innerHTML = userinfo.name
//点击搜索按钮, 发起ajax请求, 传参数给服务器端, 服务器端返回搜索的结果
searchBtn.onclick = () => {
    axios.get('/user/search', { params: { searchkey: inputEle.value } }).then((res) => {
        render(res.data.list);
        console.log(res.data);
    })
}

//删除
var caozuo = document.querySelector('tbody')
console.log(caozuo);
caozuo.onclick = (e) => {
    if (e.target.tagName == "SPAN" && e.target.classList.contains('shanchu')) {
        console.log('点击了删除按钮');
        //点击删除按钮，发起删除请求
        axios.post('/user/delete', { phone: e.target.dataset.phone }).then((res) => {
            console.log(res.data);
            //如果想要在发请求给服务器,删除成功之后, 同时让页面也看到删除后的效果,有两种方案
            //方案一: 本地删除这个dom节点
            //e.target.parentNode.parentNode.remove();
            //方案二: 让删除接口 返回删除后的新数据, 本地调用render方法重新渲染.
            render(res.data.list)
        })
    }
}
//渲染列表
function render(data) {
    var str = ''

    str = data.map((item, index) => {
        return `<tr class="caozuo">
                    <td>${item.email}</td>
                       <td>${item.name}</td>
                       <td>${item.phone}</td>
                       <td>${item.ingroup}</td>
                       <td>${item.isadmin ? '是' : '否'}</td>
                       <td> <span class="statusok" style="background-color:green ;color:white">${item.status ? '正常' : '异常'}</span> </td>
                       <td> <span>编辑</span> <span class="shanchu" data-phone="${item.phone}"}>删除</span> </td>
                   </tr>`
    }).join('')

    if (str == '') {
        str = `<th style="text-align:center;color:red"></th>
        <th style="text-align:center;color:red"></th>
        <th style="text-align:right;color:red">未查询到数据!</th>`
       
    }
    document.querySelector('tbody').innerHTML = str;


}

//axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象
var page = 1
var before = document.querySelector('.before')
console.log(before);
axios.get('/user/list', { params: { page: 1, count: 1 } }).then((res) => {
    render(res.data.list);
    console.log(res.data);
})


before.onclick = () => {
    if (page > 1) {
        axios.get('/user/list', { params: { page: --page, count: 1 } }).then((res) => {
            render(res.data.list);
            console.log(res.data);
        })
    }
}


var next = document.querySelector('.next')
next.onclick = () => {
    axios.get('/user/list', { params: { page: ++page, count: 1 } }).then((res) => {
        render(res.data.list);
        console.log(res.data);
    })
}
// axios.post('/user/login', { phone:'13611129070',pass:'1234' } ).then((res)=>{
//     console.log(res.data);
// })

